<template>
  <div class="mainprocess">
    <div class="itemcontent" v-for="(item,index) in processData">
      <div class="step">
        <template v-if="item.isReview">
          <img src="../../../../assets/third/stepselect.png" />
          <div class="line" v-show="index<(processData.length-1)"></div>
        </template>
        <template v-if="!item.isReview">
          <img src="../../../../assets/third/stepnoselect.png" />
          <div class="noline" v-show="index<(processData.length-1)"></div>
        </template>
      </div>
      <div class="reviewContent">
        <div class="comtentbox">
          <div class="header">
            <div class="title">{{item.institutions}}</div>
            <div class="content" v-if="item.isReview">
              <div v-if="item.status==0">
                <img src="../../../../assets/third/reviewthrough.png" />
                <label>审查通过</label>
              </div>
              <div v-else-if="item.status==1">
                <img src="../../../../assets/third/reviewthrough-1.png" />
                <label>审查不通过</label>
              </div>
              <span>审查人：</span>
              <!-- <span style="margin-left: 5px;">{{item.people}}</span> -->
              <!-- <el-image style="width: 120px; height: 60px" :src="item.people"></el-image> -->
              <img style="width: 100px; height: 45px;" :src="`${baseUrl}${item.people}`" alt />
              <span>{{item.date}}</span>
            </div>
            <div style="clear:both;"></div>
          </div>
          <div class="opinionbox" v-if="item.isReview">
            <div class="box">
              <span>经办意见：</span>
              {{item.advice}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import config from "@/config/index.js";
export default {
  props: {
    processData: {}
  },
  data() {
    return {
      baseUrl: config.baseUrlImg,
    };
  },

  created() {
    // console.log(this.processData);
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.mainprocess {
  padding: 30px 40px;
  .itemcontent {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    .step {
      width: 24px;
      img {
        width: 24px;
        height: 24px;
        display: block;
      }
      .line {
        width: 2px;
        height: 106px;
        background: #fba330;
        margin: auto;
      }
      .noline {
        width: 2px;
        height: 106px;
        background: #ccc9c6;
        margin: auto;
      }
    }
    .reviewContent {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      margin-left: 20px;
      .comtentbox {
        width: 100%;
        max-width: 980px;
        height: 130px;
        box-sizing: border-box;
        padding-top: 2px;
        .header {
          .title {
            float: left;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 20px;
            color: #4d4d4d;
          }
          .content {
            float: right;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 20px;
            color: #4d4d4d;
            img {
              width: 16px;
              height: 16px;
              margin-right: 8px;
              vertical-align: middle;
              margin-bottom: 3px;
            }
            span {
              color: #a6a6a6;
              margin-left: 30px;
            }
          }
        }
        .opinionbox {
          // margin-top: 10px;
          background: #f3f4f5;
          padding: 16px 16px 20px;
          border-radius: 2px;
          .box {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 20px;
            color: #4d4d4d;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            max-height: 60px;
            overflow: hidden;
            span {
              color: #a6a6a6;
            }
          }
        }
      }
    }
  }
}
</style>
